<template>
  <div class="setting-yly-container">
    <!-- 操作 -->
    <el-row class="setting-yly-row">
      <el-col :span="7" style="text-align:left;padding-left:15px" class="setting-yly-row-col">
        <el-button type="primary" size="small" style="padding:8px 30px;" @click="add">新 增</el-button>
      </el-col>
      <el-col :span="7">
        <span>签到总开关</span>
        <el-switch v-model="switchData.is_open" active-color="#13ce66" active-value="1" inactive-value="0" 
          @change="putSigninSwitch"></el-switch>
      </el-col>
      <el-col :span="10" style="text-align:right;padding-right:40px">
        <el-input v-model="searchName" placeholder="请输入名称" size="small" style="max-width:240px" @keydown.enter="search">
          <el-button slot="suffix" type="text" size="small" class="search-button" @click="search">
            <i class="el-icon-search"></i>
          </el-button>
        </el-input>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <div>
      <el-table :data="signinList" style="width:100%" stripe>
        <el-table-column prop="name" label="ID" align="活动名称"></el-table-column>
        <el-table-column prop="start_time" label="开始日期" align="center"></el-table-column>
        <el-table-column prop="end_time" label="结束日期" align="center"></el-table-column>
        <el-table-column prop="remark" label="签到说明" align="center"></el-table-column>
        <el-table-column prop="account" label="活动背景" align="center">
          <template slot-scope="scope">
            <l-pic :picurl="scope.row.pic_url_activity" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
          </template>
        </el-table-column>
        <el-table-column prop="kefu_phone" label="签到背景" align="center">
          <template slot-scope="scope">
            <l-pic :picurl="scope.row.pic_url_sign" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope" width="80px">
            <el-switch v-model="scope.row.status" active-color="#13ce66" active-value="1" inactive-value="0" @change="changeStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" type="text" 
              @click="eidt(scope.row)"><i class="el-icon-edit"/></el-button>
            <el-button class="action-button" 
              @click="del(scope.row)" type="text">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="text-align:right;margin:15px 15px">
      <el-pagination class="page"
        background
        layout="total, prev, pager, next, jumper"
        :total="count"
        :page-size="10"
        :current-page="page"
        @size-change="changePage"
        @current-change="changePage">
      </el-pagination>
    </div>

    <!-- 新增 编辑 -->
    <el-dialog :visible.sync="disAdd" width="60%" :title="isAdd ? '新增' : '修改'" top="0">
      <add :isAdd="isAdd" :addData="signinData" @success="disAdd = false; getSigninList()" v-if="disAdd"/>
    </el-dialog>
  </div>
</template>

<script>
import { getSigninList, putSignin, delSignin, getSigninSwitch, putSigninSwitch } from '@/api/marketing'
import add from './components/add'
import LPic from '@/components/lPic'

export default {
  name: 'setting-yly',
  components: {
    add,
    LPic
  },
  data() {
    return {
      page: 1,
      count: 1,

      signinList: [],
      searchName: '',

      disAdd: false,
      isAdd: true,

      signinData: {
        key: this.$store.state.app.activeApp.saa_key,
        status: '1',
        name: '',
        start_time: '',
        end_time: '',
        integral: '',
        pic_url_activity: '',
        pic_url_sign: '',
        supplementary: '1',
        supplementary_price: '',
        supplementary_number: '',
        continuous: '',
        remark: '',
        quotations: '',
        continuous_arr: [{days: '', give_type: '1', give_value: ''}]     
      },

      switchData: {}
    }
  },
  mounted() {
    this.getSigninList();
    this.getSigninSwitch();
  },
  methods: {
    /**
     * 获取积分商品列表
     */
    getSigninList() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: this.page,
        limit: 10
      };
      getSigninList(params).then(res => {
        if(res.status === 200){
          this.signinList = res.data;
          this.count = parseInt(res.count);
        }else if(res.status === 204){
          this.signinList = [];
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getSigninList();
    },
    /**
     * 搜索
     */
    search() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: 1,
        limit: 10,
        searchName: this.searchName
      };
      getSigninList(params).then(res => {
        if(res.status === 200){
          this.signinList = res.data;
          this.count = parseInt(res.count);
        }else if(res.status === 204){
          this.signinList = [];
          this.count = 1;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 新增
     */
    add() {
      this.signinData = {
        key: this.$store.state.app.activeApp.saa_key,
        status: '1',
        name: '',
        start_time: '',
        end_time: '',
        integral: '',
        pic_url_activity: '',
        pic_url_sign: '',
        supplementary: '0',
        supplementary_price: '',
        supplementary_number: '',
        continuous: '0',
        remark: '',
        quotations: '',
        continuous_arr: [{days: '', give_type: '1', give_value: ''}]  
      };
      this.isAdd = true;
      this.disAdd = true;
    },
    /**
     * 删除
     */
    del(data) {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        id: data.id
      }
      delSignin(params).then(response => {
        if(response.status === 200){
          this.getSigninList();
          this.$message.success('删除成功！');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 编辑
     */
    eidt(data) {
      this.signinData = {
        key: this.$store.state.app.activeApp.saa_key,
        status: data.status,
        id: data.id,
        name: data.name,
        start_time: data.start_time,
        end_time: data.end_time,
        integral: data.integral,
        pic_url_activity: data.pic_url_activity,
        pic_url_sign: data.pic_url_sign,
        supplementary: data.supplementary,
        supplementary_price: data.supplementary_price,
        supplementary_number: data.supplementary_number,
        continuous: data.continuous,
        remark: data.remark,
        quotations: data.quotations,
        continuous_arr: JSON.parse(data.continuous_arr)
      };
      this.disAdd = true;
      this.isAdd = false;
    },
    /**
     * 修改状态
     */
    changeStatus(data) {
      const params = { key: this.$store.state.app.activeApp.saa_key, id: data.id, status: data.status };
      putSignin(params).then(res => {
        if(res.status === 200){
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 查询签到总开关
     */
    getSigninSwitch() {
      getSigninSwitch({key: this.$store.state.app.activeApp.saa_key,route:'signIn'}).then(res => {
        if(res.status === 200) {
          this.switchData = res.data;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    /**
     * 修改签到总开关
     */
    putSigninSwitch() {
      putSigninSwitch({
        id: this.$store.state.app.activeApp.saa_id,
        key: this.$store.state.app.activeApp.saa_key,
        route:'signIn',
        status: this.switchData.is_open
      }).then(res => {
        if(res.status === 200) {
          this.$message.success('修改成功！');
        }else{
          this.$message.error(res.message);
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.setting-yly-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
}
.setting-yly-row{
  margin: 15px 0;
  text-align: center;
  height: 40px;
  line-height: 40px;
  &-col{
    padding: 0 15px;
    max-width: 95%;
    overflow: hidden;
    display: flex;
  }
}
</style>